import React, { Component } from 'react';
import store from "../../store"
import { connect } from "react-redux";
import "./Set.scss"
import { getUserInfoAction, toGenderAction, GenderMenAction, GenderWomenAction, bgDisappearAction } from "../../store/actions/SettingAction"
import { withRouter } from "react-router-dom";
import { Toast } from 'antd-mobile';

class Set extends Component {
  state = {
    sex: ''
  }
  //1.点击头像栏跳转到avatar页面
  toAvatar = () => {
    this.props.history.push('/setavatar')
  }
  //2.点击姓名栏跳转到UserName页面
  toUserName = () => {
    this.props.history.push('/setUserName')
  }
  //3.点击修改密码栏跳转到Password页面
  toPassword = () => {
    this.props.history.push('/setPassword')
  }
  //4.点击更换手机栏跳转到Mobile页面
  toMobile = () => {
    Toast.info('敬请期待')
  }
  //5.点击gender的背景,弹出框消失
  changebg = () => {

  }
  //6.退出登录
  LogOut1 = async () => {
    // await logOut();
    await this.props.history.push('index')
    await localStorage.setItem('token', '')
    await localStorage.setItem('user', '')
  }
  //7.返回"我的"页面
  setBack = () => {
    this.props.history.push('my')
  }

  render() {
    return (
      <div>
        <div className="setting">
          <div className="setHeader">
            <div className="headerBack" onClick={this.setBack}><i className="iconfont icon-youjiankuohao"></i></div>
            <div className="headerTitle">设置</div>
            <div></div>
          </div>
          <div className="setInfo">
            <div className="setInfoLogo" onClick={this.toAvatar}>
              <i className="iconfont icon-hua"></i>
              <div className="InfoLogoTitle">头像</div>
              <div className="InfoLogoPic">
                <div className="InfoLogoPic1">
                  <img src={this.props.userMessage && this.props.userMessage.data && this.props.userMessage.data.avatar ? 'http://linjiashop.microapp.store/prod-api/file/getImgStream?idFile=' + this.props.userMessage.data.avatar : "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2959704908,4047124545&fm=26&gp=0.jpg"} alt="" />
                </div>
              </div>
              <i className="iconfont icon-youjiankuohao"></i>
            </div>
            <div className="setInfoName" onClick={this.toUserName}>
              <i className="iconfont icon-yonghu"></i>
              <div className="InfoName">姓名</div>
              <div className="InfoPhone">{this.props.userMessage && this.props.userMessage.data ? decodeURIComponent(this.props.userMessage.data.nickName) : ''}</div>
              <i className="iconfont icon-youjiankuohao"></i>
            </div>
            <div className="setInfoSex" onClick={this.props.toGender}>
              <i className="iconfont icon-fenxiang"></i>
              <div className="InfoSex">性别</div>
              <div className="InfoChoose">{this.props.userMessage && this.props.userMessage.data&& this.props.userMessage.data.gender ? (this.props.userMessage.data.gender === "male" ? '男' : '女') : '请选择'}</div>
              <i className="iconfont icon-youjiankuohao"></i>
            </div>
            <div className="setInfoPassword" onClick={this.toPassword}>
              <i className="iconfont icon-yanjingbiyan"></i>
              <div className="InfoPwdChange">修改密码</div>
              <i className="iconfont icon-youjiankuohao"></i>
            </div>
            <div className="setInfoPhone" onClick={this.toMobile}>
              <i className="iconfont icon-dianhua"></i>
              <div className="InfoPhoneChange">更换手机</div>
              <i className="iconfont icon-youjiankuohao"></i>
            </div>
            <div className="setInfoAbout">
              <i className="iconfont icon-gantanhao"></i>
              <div className="InfoAboutProject">关于本项目</div>
              <i className="iconfont icon-youjiankuohao"></i>
            </div>
          </div>
          <div className="setLogOut">
            <div className="LogOutButton" onClick={this.LogOut1}>
              退出登录
          </div>
          </div>
        </div>
        <div className={this.props.bg === "" ? "settingbg" : "settingbg bgappear"} onClick={this.props.bgDisappear}>
          <div className={this.props.bg === "" ? "setgender" : "setgender genderappear"} onClick={this.changebg}>
            <div className="man">
              <div className="manbox" onClick={this.props.GenderMenAction}>
                <i className={this.props.iconAppear === "man" ? "icon-shezhi iconfont iconAppear" : "icon-shezhi iconfont "} onClick={this.props.changeGenderMen}></i>
              </div>
              <span className="manchoose">男</span>
            </div>
            <div className="women">
              <div className="womenbox" onClick={this.props.GenderWomenAction}>
                <i className={this.props.iconAppear === "women" ? "icon-shezhi iconfont iconAppear" : "icon-shezhi iconfont "} onClick={this.props.changeGenderWomen}></i>
              </div>
              <span className="womenchoose">女</span>
            </div>
          </div>
        </div>
      </div>

    );
  }

  async componentDidMount() {
    await store.dispatch(getUserInfoAction())
  }
}
const mapStateToProps = (state) => {
  return {
    userMessage: state.SettingReducer.userMessage,
    bg: state.SettingReducer.bg,
    iconAppear: state.SettingReducer.iconAppear
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    toGender: function () {
      dispatch(toGenderAction());
    },
    changeGenderMen: function () {
      dispatch(GenderMenAction())
    },
    changeGenderWomen: function () {
      dispatch(GenderWomenAction())
    },
    bgDisappear: function () {
      dispatch(bgDisappearAction())
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Set));
